//常用flex定义，2017年11月30日22:26:44

@mixin flex ($dir: 'row', $justifyContent: 'start', $alignItems: 'start') {
    display: flex;
    flex-direction: #{$dir};

    @if $justifyContent == 'start' or $justifyContent == 'end' {
        justify-content: #{'flex-' + $justifyContent};
    }
    @else if $justifyContent == 'between' or $justifyContent == 'around' {
        justify-content: #{'space-' + $justifyContent};
    }
    @else {
        justify-content: #{$justifyContent};
    }

    @if $alignItems == 'start' or $alignItems == 'end' {
        align-items: #{'flex-' + $alignItems};
    }
    @else {
        align-items: #{$alignItems};
    }
}

@mixin flexRow ($justifyContent: 'start', $alignItems: 'start') {
    @include flex('row', $justifyContent, $alignItems);
}

@mixin flexColumn ($justifyContent: 'start', $alignItems: 'start') {
    @include flex('column', $justifyContent, $alignItems);
}
